import { reactive } from 'vue'
import type { DetailDialogOptions, DetailState } from '../types'

export function useDetailDialog(options: DetailDialogOptions) {
  // 详情状态
  const state = reactive<DetailState>({
    visible: false,
    title: options.title || '详情',
    width: options.width || '50%',
    loading: options.loading || false,
  })

  // 方法
  const methods = {
    // 设置加载状态
    setLoading: (loading: boolean) => {
      if (state.loading !== loading) {
        state.loading = loading
      }
    },

    // 设置可见状态
    setVisible: (visible: boolean) => {
      if (state.visible !== visible) {
        state.visible = visible
      }
    },

    // 打开对话框
    open: () => {
      state.visible = true
    },

    // 关闭对话框
    close: () => {
      state.visible = false
    },
  }

  return {
    state,
    ...methods,
  }
}
